<template>
  <div>
    <Card :bordered="false">
      <tables
        ref="tables"
        editable
        searchable
        v-model="tableData"
        :columns="columns"
        @on-edit="onEdit"
        :addable="addable"
        @handleAdd="onAddWorkSpace"
        @on-delete="onDelete"
        :ckPermission="['workspace.add']"
      />
    </Card>

    <DeleteModal
      :modalVisible="modalVisible"
      :modalLoading="modalLoading"
      :deleteId="deleteId"
      @handleDelete="handleDelete"
      @handleChangeVisible="handleChangeVisible"/>

    <AddWorkspace
      :handleType="handleType"
      :showModal="showModal"
      :usersData="usersData"
      :formData="formData"
      @changeVisible="changeVisible"
      @handleSubmit="handleSubmit"/>
  </div>
</template>

<script>
  import Tables from '_c/tables'
  import DeleteModal from '_c/delete-modal'
  import AddWorkspace from '@/view/workspace/component/add'
  import {getWorkSpaceList, addWorkspace, editWorkspace, deleteWorkspace} from '@/api/workspace'
  import {users} from '@/api/user'

  export default {
    name: 'workspace',
    components: {
      Tables,
      DeleteModal,
      AddWorkspace
    },
    mounted() {
      this.flashWorkSpace()
    }
    ,
    data() {
      return {
        modalVisible: false,
        modalLoading: false,
        deleteId: 0,
        showModal: false,
        addable: true,
        handleType: '编辑部门',
        usersData: [],
        formData: {},
        columns: [
          {title: '部门名', key: 'name'},
          {title: '管理人', key: 'owner'},
          {title: '管理人邮箱', key: 'owner_email'},
          {title: '审核人', key: 'master'},
          {title: '审核人邮箱', key: 'master_email'},
          {
            title: '操作',
            key: 'handle',
            options: ['edit'],
            button: [
              (h, params, vm) => {
                return h('div', [
                  h('a', [
                    h('icon', {
                      props: {
                        type: 'ios-create',
                        color: '#2D8CF0',
                        size: '20',
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          vm.$emit('on-edit', params.row)
                        }
                      },
                      directives: [{ name: "can", value: ["workspace.edit"] }]
                    }, "编辑")
                  ]),
                  h('a', [
                    h('icon', {
                      props: {
                        color: '#B14949',
                        type: 'md-trash',
                        size: '20'
                      },
                      on: {
                        click: () => {
                          vm.$emit('on-delete', params.row)
                        }
                      },
                      directives: [{ name: "can", value: ["workspace.delete"] }]
                    }, "删除")
                  ])
                ])
              }
            ]
          }
        ],
        tableData: []
      }
    }
    ,
    methods: {
      onEdit: function (params) {
        this.showModal = true
        this.handleType = '编辑部门'
        this.formData = {
          id: params.id,
          name: params.name,
          owner: params.owner_id,
          master: params.master_id,
        }
      }
      ,
      changeVisible: function (val) {
        this.showModal = val
      }
      ,
      onDelete: function (params) {
        this.modalVisible = true
        this.deleteId = params.id
      }
      ,
      handleChangeVisible: function (val) {
        this.modalVisible = val
      }
      ,
      handleDelete: function (id) {
        this.modalLoading = true
        deleteWorkspace({id: id}).then(res => {
          this.$Message.success(res.message)
          this.handleGetWorkSpaceList()
        })
        setTimeout(() => {
          this.modalLoading = false
          this.modalVisible = false
        }, 2000)
      }
      ,
      onAddWorkSpace: function () {
        this.handleType = '新增部门'
        this.showModal = true
        this.formData = {}
      }
      ,
      handleGetWorkSpaceList: function () {
        getWorkSpaceList().then(res => {
          this.tableData = res.data
        })
      }
      ,
      handleSubmit: function (param) {
        let id = param.id || ''
        if (id) {
          editWorkspace(param).then(res => {
            this.$Message.success(res.message)
            setTimeout(() => {
              this.handleGetWorkSpaceList()
              this.showModal = false
            }, 2000)
          })
        } else {
          addWorkspace(param).then(res => {
            this.$Message.success(res.message)
            setTimeout(() => {
              this.handleGetWorkSpaceList()
              this.showModal = false
            }, 2000)
          })
        }
      }
      ,
      flashWorkSpace: function () {
        this.handleGetWorkSpaceList()
        users().then(res => {
          this.usersData = res.data
        })
      }
      ,
    }
  }
</script>

<style>

</style>
